<template>
  <div>
    <!-- 使用echarts必须准备一个有宽高的盒子 -->
    <div ref="radarRef" class="main" />
  </div>
</template>

<script>
/**
 1、根据官方文档配合 vue实现最简化的 demo渲染
  a、图表的初始化位置 一定要放到 mounted进行执行
  b、图表的渲染挂载节点必须具有显示的宽高
  c、在vue中通常我们会封装一个单独的methods 里面包含复杂的初始化代码 然后mounted中只负责电泳函数即可

 2、图标的参数配置化
  场景：业务中的图表组件很可能会被复用多次 都是雷达图 但是要渲染的数据不一样
  要把那些可能随着业务的不同 传入不同的参数的地方变成props

 3、图表的新数据更新
 场景：大屏可视化 有新数据进来了 使用最新的数据重新渲染图表
 实现思路：
  1、找到一个更新图标的内置方法
  2、使用watch监听一下传入的参数是否变化一旦变化 调用echart更新数据的方法

  注意小技巧：如何在多个组件选项中 共享数据 ——》动态的把需要共享的数据挂载到this上面去

 4、data的性能问题
  前提：data函数中return出去的对象里面任何一个数据不管层次多深都会被转化成响应式的数据
  问题：如果我们放到data中的数据本身没有必要是响应式的 但是你放了 或者 数据本身非常庞大 但是你也放了
  这个时候会有比较严重的响应式初始化性能浪费 随着数据的增大 消耗的时间就越大
  data中存放数据是有要求的：
    1、数据不能太大
    2、不需要响应式的千万不要放进去

    重点：在mounted中或者created中动态的往this上挂载属性或者方法
          既可以多个选项共享而且不是响应式的！！！！！（没有性能损耗）

    原因：因为响应式的内部处理发生在created之前 所以一旦响应式结束之后
          在动态的往this也就是实例身上挂载任何属性都不会处理成响应式的。
*/
import * as echarts from 'echarts'
export default {
  name: 'Radar',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    title() {
      // 调用echart实例的方法 setOption 把新参数传入刷新图表
      // 在这个函数中如何获取 methods中的 initChart中的 局部变量呢？？
      // this -》组件实例对象 在vue组件中的配置项中 this是共享的
      // 把echart实例挂载到this上去 大家就可以共享这个实例对象了
      this.myChart.setOption({
        ...this.option,
        title: {
          text: this.title
        }
      })
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // const chartDom = document.getElementById('main')
      const chartDom = this.$refs.radarRef
      this.myChart = echarts.init(chartDom)
      this.option = {
        title: {
          text: this.title // 改造成prop传入 变成活的
        },
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      }

      this.option && this.myChart.setOption(this.option)
    }
  }
}
</script>

<style>
.main {
  width: 300px;
  height: 400px;
}
</style>
